﻿<!DOCTYPE html>
<html>
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <meta charset="utf-8">
        <!-- Script includes go here -->
        <script src="jslib/debug.js"></script>
        <!--基础类-->
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <script src="jslib/vmath.js"></script>
        <script src="jslib/webgl/mathdevice.js"></script>
        <script src="jslib/camera.js"></script>
        <script src="jslib/floor.js"></script>
        <!--碰撞检测等-->
        <script src="jslib/physics2ddevice.js"></script>
        <!--2D绘制-->
        <script src="jslib/draw2d.js"></script>
    </head>
    <body>
        <canvas id="canvas"width="660px"height="480px"/>
        <script>
            var s_top=false,s_bottom=false,s_left=false,s_right=true;

            /*步长*/
            var moveStep = 15;

            var padding = 0;
            /* Game code goes here */

            /*创建基础类*/
            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });

// Create the GraphicsDevice interface with no parameters
            var graphicsDeviceParameters = { };
            var graphicsDevice = TurbulenzEngine.createGraphicsDevice(graphicsDeviceParameters);
// Create the MathDevice interfaces with no parameters
            var mathDeviceParameters = { };
            var mathDevice = TurbulenzEngine.createMathDevice(mathDeviceParameters);
            var camera = Camera.create(mathDevice);
            var floor = Floor.create(graphicsDevice, mathDevice);
            floor.color = [1.0, 0.1, 0.1, 1.0];
            floor.fadeToColor = [0.95, 0.95, 1.0, 1.0];
            floor.numLines = 400;
            var clearColor = [0.95, 0.95, 1.0, 0.0];
            var lastAngle = 0;
            //var angle = mathDevice.deg2Rad(1);
// Movement units
            var up = 1.0;
            var down = 1.0;
            var left = 2.0;
            var right = 2.0;
            var position = mathDevice.v3Build(0.0, 8.0, 0.0);
            var target = mathDevice.v3Build(0.0, 3.0, -15.0);
            var upVector = mathDevice.v3BuildYAxis();
            camera.lookAt(target, upVector, position);
            camera.updateViewMatrix();



            /*绘制2D*/
            var draw2D = Draw2D.create({
                graphicsDevice: graphicsDevice
            });
            var sprite = Draw2DSprite.create({
                width: 15,
                height: 15,
                x: Math.ceil(Math.random()*21)*30+15,
                y: Math.ceil(Math.random()*11)*30+15 ,
                color: [0.0, 1.0, 1.0, 1.0],
                //rotation: Math.PI / 4
                rotation: 0
            });



            function updateRotationFn(angle)
            {
                lastAngle += angle;
                camera.matrix = mathDevice.m43FromAxisRotation(down, lastAngle);
                mathDevice.m43SetPos(camera.matrix, position);
                camera.updateViewMatrix();
            }
            var intervalID;
            function mainLoopFn()
            {
                //updateRotationFn(angle);
                //camera.updateViewProjectionMatrix();
                if (graphicsDevice.beginFrame())
                {
                    graphicsDevice.clear(clearColor, 1.0, 0.0);
                    floor.render(graphicsDevice, camera);
                    draw2D.begin();
                    draw2D.drawSprite(sprite);
                    draw2D.end();
                    graphicsDevice.endFrame();
                }
            }
// Call the mainLoopFn, 60 fps
            intervalID = TurbulenzEngine.setInterval(mainLoopFn, 1000 / 60);
            TurbulenzEngine.onunload = function destroyFn()
            {
// Clear the interval
                TurbulenzEngine.clearInterval(intervalID);
                position = null;
                clearColor = null;
                camera = null;
                floor = null;
                TurbulenzEngine.flush();
            };


        </script>
    </body>
</html>